<template>
	<view class="goods-box" v-if="detail" @tap="jump('/pages/goods/detail/index', { id: detail.id })">
		<view>
			<!-- <image v-if="isTag && detail.activity" class="tag-img" :src="tagPath[detail.activity.type]" mode=""></image> -->
			<image style="width: 180rpx;height: 180rpx;margin-left: 20rpx;" :src="detail.image" lazy-load mode="aspectFill"></image>
		</view>
		<!-- <view class="tip one-t">{{ detail.subtitle }}</view> -->
		<!-- <view class="title more-t">{{ detail.title }}</view> -->
		<view class="price-box">
			<view style="line-height: 46rpx;">
				{{detail.title}}
			</view>
			<text class="bgc-image">
				{{detail.activity.rules.team_num}}人团
			</text>
			<view style="display: flex;align-items: center;width: 100%; justify-content: space-between;">
				<view style="display: flex;align-items: center;">
					<view class="seckill-current" style="color: #FF0000;">￥{{ detail.activity_type === 'groupon' ? detail.groupon_price : detail.price }}</view>
					<view class="original">{{ detail.original_price }}</view>
				</view>
				<view style="padding: 10rpx 27rpx; background-color: #FFA77F; color: #fff; border-radius: 40rpx; float: right;">
					去拼团
				</view>
			</view>
			<!-- <view class="flex x-bc align-end">		
				<view class="current">{{ detail.activity_type === 'groupon' ? detail.groupon_price : detail.price }}</view>
				<view class="sales miso-font">销量{{ detail.sales }}件</view>
			</view> -->
			<!-- <view class="x-f tag-box"> -->
			<!-- <view class="discount">新人礼</view>
				<view class="discount">满100减60</view> -->
			<!-- </view> -->
		</view>
	</view>
</template>

<script>
	export default {
		name: 'shoproGoodsCard',
		components: {},
		data() {
			return {
				tagPath: {
					groupon: '/static/imgs/groupon_tag.png',
					seckill: '/static/imgs/seckill_tag.png'
				}
			};
		},
		
		props: {
			isTag: {
				type: [Boolean, String],
				default: false
			},
			detail: {
				type: Object,
				default: null
			}
		},
		computed: {},
		methods: {
			

			// 路由跳转
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			}
		}
	};
</script>

<style lang="scss">
	.goods-box {
		width: 100%;
		display: flex;
		background: #fff;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
		padding-top: 20rpx;
		border-bottom: 1rpx solid #F8F8F8;
		// margin-bottom: 50rpx;
		// padding-bottom: 20rpx;
		// border-radius: 20rpx;
		// overflow: hidden;

		.img-box {
			padding-left: 10rpx;

			.img {
				width: 140rpx;
				height: 140rpx;
			}
		}

		.tip {
			width: 346rpx;
			line-height: 56rpx;
			background: rgba(246, 242, 234, 1);
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(168, 112, 13, 1);
			padding: 0 20rpx;
		}

		.title {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 36rpx;
			height: 72rpx;
			margin: 20rpx 20rpx 10rpx;
		}

		.price-box {
			width: 100%;
			padding-right: 20rpx;
			margin-left: 40rpx;

			.bgc-image {
				display: inline-block;
				border-radius: 20rpx;
				color: #FE5C03;
				font-size: 22rpx;
				margin: 10rpx 0;
				padding: 7rpx 22rpx;
				background-color: #FFEFE5;
			}

			

			.original {
				font-size: 22rpx;
				font-weight: 400;
				text-decoration: line-through;
				color: rgba(153, 153, 153, 1);
				margin-left: 14rpx;
				// line-height: 22rpx;
				// margin-bottom: 10rpx;

				&:before {
					content: '￥';
					font-size: 20rpx;
				}
			}

			.tag-box {
				.discount {
					line-height: 28rpx;
					border: 1rpx solid rgba(225, 33, 43, 1);
					border-radius: 8rpx;
					font-size: 18rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(225, 33, 43, 1);
					padding: 0 8rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
</style>
